<!-- 订单详情 -->
<template>
	<view :style="{height:rootHeight + 'px'}" class="detailsBgcolor">
		<!-- 订单详情头部 -->
		 <view class="bgc" >
			 <view class="top1" @tap="goBackOrder" :class="fixedHeadBg" :style="{paddingTop:statusHeight + 'px'}">
				 <uni-icon type="arrowleft" size="22" :color="fixedHeadBg ? '#000000' : '#ffffff'"></uni-icon>
				 <text>订单详情</text>
			 </view>
			 <view class="top2">
				 <view class="top2-left">{{orderState}}<text v-if="this.beforeTab == 1">00.21</text></view>
				 <view class="top2-right">
					 <text v-if="this.beforeTab == 2 ? false : true">￥30</text>
				 </view>
			 </view>
			<image src="/static/myPic/detailsZt.png" class="dsyIco" v-if="this.beforeTab == 2"></image>
		</view>
		<view class="orderDetailsWrap">
		<view class="detailsBox">
			<view class="detailPic">
				<view class="detailPic-tit">游玩指南</view>
				<scroll-view
				scroll-x="true"
				class="scrollBox">
				<navigator url="/pages/home/scenicSpot/spotDetail" class="scrollBox-item"><view><image src="/static/testglPic.png"></image></view><view><text>大清门</text></view></navigator>
				<navigator url="/pages/home/scenicSpot/spotDetail" class="scrollBox-item"><view><image src="/static/testglPic8.jpg"></image></view><view><text>崇政殿</text></view></navigator>
				<navigator url="/pages/home/scenicSpot/spotDetail" class="scrollBox-item"><view><image src="/static/testglPic5.jpg"></image></view><view><text>凤凰楼</text></view></navigator>
				<navigator url="/pages/home/scenicSpot/spotDetail" class="scrollBox-item"><view><image src="/static/testglPic.png"></image></view><view><text>大清门</text></view></navigator>
				</scroll-view>
			</view>
			<!--票信息 -->
			<view class="detailsPiao">
				<view class="piaoTit">沈阳故宫门票成人票</view>
				<view class="piaoInfo">
					<view><text>使用日期</text>2019-10-23 周三</view>										
					<view><text>使用方法</text>无需换票，持 [身份证] 直接入园</view>
					<view><text>入园时间</text>09:00-15:45</view>
					<view><text>入园地址</text>沈阳故宫正门</view>
					<view><text>购买数量</text>1张</view>
					<view><text>单价包含</text>【沈阳故宫门票成人票一张】</view>
					<view><text>退改规则</text>未消费可随时退款；3个工作日内完成退款审核。</view>
				</view>
			</view>
		</view>
			<!-- 订单信息 -->
		<view class="detailsBox">
			<view class="detailsOrder">
				<view class="OrderTit">订单信息</view>
				<view class="orderInfo">
					<view>
						<text>游玩人</text>
						<view class="orderInfo-name">
							<view>张蕾</view>
							<view>身份证 122************019</view>
						</view>
						</view>
					<view><text>订单编号</text>12323242342454</view>
					<view><text>购买数量</text>1</view>
					<view><text>支付时间</text>2019-10-23 10:33:23</view>
					<view><text>支付方式</text>在线支付</view>
				</view>
				<view class="ma-item" v-for="(item,index) in maData" :key='index'>
					<image :src="item.img"></image>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="orderDetailsBtn">
			<view class="botmMoney"  
				:style="{'visibility':(this.beforeTab == 1 || this. beforeTab == 2 ? '' : 'hidden')}">
				￥<text>320</text>
			</view>
			<view class="btn" :style="{background:backgroundBtn}">{{botmStateBtn}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		components:{
			uniIcon
		},
		data(){
			return{
				beforeTab:null, //获取订单状态
				beforeOrder:null,//获取订单
				orderState:'已还款' ,//顶部显示订单状态文字
				botmStateBtn:'立即付款',//底部订单状态按钮
				isShowBotmMoney:false,//默认隐藏底部money
				fixedHeadBg:'', //scrollTop动态头部背景参数
				routeInd:null ,//判断是否通过行程进入的页面
				axisInd:null,//判断是否通过时间轴进入的页面
				maData:[
					{
						img:'/static/myPic/2weima.png'
					}
				]
			}
		},
		methods:{
			goBackOrder(){
				console.log(this.beforeTab);
				if(this.routeInd !== null || this.axisInd !== null){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.redirectTo({
						url:'/pages/my/myOrder/orders?state=' + this.beforeTab
					})
				}
			
			},
			// 显示订单状态
			payState(){
				if(this.beforeTab == 0){
					this.orderState = '',
					this.botmStateBtn = '',
					this.backgroundBtn = 'linear-gradient(to right,#40B4FD,#5776FE)'
				}else if(this.beforeTab == 1){
					this.orderState = '待支付',
					this.botmStateBtn ='立即付款',
					this.backgroundBtn = 'linear-gradient(to right,#FD7640,#FE544C)'
				}else if(this.beforeTab == 2){
					this.orderState = '待使用',
					this.botmStateBtn ='申请退款',
					this.backgroundBtn = 'linear-gradient(to right,#FD7640,#FE544C)'
				}else if(this.beforeTab == 3){
					this.orderState = '已使用',
					this.botmStateBtn = '评价',
					this.backgroundBtn = '#C2D7F8'
				}else if(this.beforeTab == 4){
					this.orderState = '退款中',
					this.botmStateBtn = '退款中',
					this.backgroundBtn = ''
				}else{
					
				}
			}
		},
		onLoad(e){
			 console.log(e);
			this.beforeTab = e.orderDetails;
			this.routeInd = e.routeInd;
			this.axisInd = e.axisInd
			// this.beforeOrder = e.orderTab;
			this.payState();
		},
		onPageScroll(e){
			if(e.scrollTop > 100){
				this.fixedHeadBg = 'fixedHeadBg'
			}else{
				this.fixedHeadBg = ''
			}
			
		},
		computed:{
			statusHeight(){
				return global.statusBarHeight
			},
			rootHeight(){
				return global.winHeight
			},
		}
	}
</script>

<style>
	/* 订单详情头部start */
	.bgc{
		width:100%;
		height: 355upx;
		background-image: linear-gradient(to top,#5873FF,#54B1FF);
		border-radius: 0 0 60upx 60upx;
		position: relative;
		box-sizing: border-box;
		}
		.top1{
			line-height: 88upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom:40upx;
			padding:0 30upx;
			position:fixed;
			z-index: 999;
			width:100%;
		}
		.top1 text{
			color: #FFFFFF;
			font-size: 32upx;
			margin-left: 29upx;
		}
		.top2{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 40upx;
			position: absolute;
			width: 100%;
			bottom:104upx;
			box-sizing: border-box;
			padding:0 60upx;
		}
		.top2>view:first-child text{
			margin-left: 10upx;
		}
		.top2-left{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
		}
		
		.top2-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
		}
	/* 订单详情头部end */	
	.detailsBgcolor{
		background-color: #EFF2F7;
		
	}
	.dsyIco{
		width:200upx;
		height: 169upx;
		position: absolute;
		z-index: 9;
		right:42upx;
		bottom:60upx;
	}
	.orderDetailsWrap{
		margin-top:-90upx;
		position: relative;
	}
	.detailsBox{
		
		width:720upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding:30upx 32upx;
		box-sizing: border-box;
		border:1upx solid #ddd;
		margin:auto;
		margin-bottom:25upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		overflow: hidden;
	}
	.detailPic{
		display: flex;
		flex-direction: row;
	}
	.detailPic-tit{
		color: #5776FE;
		font-size: 26upx;
	}
	
	.scrollBox{
		white-space: nowrap;
		
		display: flex;
		flex-direction: row;
		margin-left:56upx;
	}
	.scrollBox-item{
		margin-right: 11upx;
		display: inline-block !important;
		border-radius: 10upx;
	}
	.scrollBox image{
		width:206upx;
		height:130upx;
	}
	.scrollBox text{
		display: inline-block;
		color: #333333;
		font-size: 24upx;
		margin-top:14upx;
		max-width: 206upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.detailsPiao{
		
	}
	.piaoTit{
		font-size: 28upx;
		color: #333333;
		line-height: 92upx;
		border-bottom: 1upx solid #EEEDED;
	}
	.piaoInfo{
		
	}
	.piaoInfo > view{
		line-height: 60upx;
		font-size: 28upx;
		color: #333333;
		
	}
	.piaoInfo > view:first-child{
		color: #FC9B28;
	}
	.piaoInfo > view:last-child{
		color: #FC9B28;
	}
	.piaoInfo text{
		font-size: 28upx;
		color: #666666;
		width:200upx;
		display: inline-block;
	}
	.OrderTit{
		font-size: 28upx;
		color: #333333;
		line-height: 92upx;
		border-bottom: 1upx solid #EEEDED;
	}
	.OrderTit:before{
		content: "";
		display: inline-block;
		width:4upx;
		height: 27upx;
		background-color: #577AFF;
		margin-right: 15upx;
	}
	.orderInfo{
		}
	
	.orderInfo view{
		line-height: 60upx;
		font-size: 28upx;
		color: #333333;
	}
	
	.orderInfo > view text{
		font-size: 28upx;
		color: #666666;
		width:200upx;
		display: inline-block;
	}
	.orderDetailsBtn{
		/* position: fixed;
		z-index: 9;
		bottom:0;
		left:0; */
		height:124upx;
		box-shadow: 0px -5px 16px 0px rgba(47,155,254,0.16);
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding:0 34upx;
		box-sizing: border-box;
		background: #FFFFFF;
		}
		.orderDetailsBtn .btn{
			width:260upx;
			height: 76upx;
			line-height: 76upx;
			border-radius: 76upx;
			font-size: 26upx;
			text-align: center;
			color: #FFFFFF;
			background:linear-gradient(to right,#FD7640,#FE544C) ;
		}
		.orderInfo >view:first-child{
			display: flex;
			flex-direction: row;
		}
		.orderInfo-name{
			display: flex;
			flex-direction: column;
		}
		.orderInfo-name text{
			color: #333333;
		}
		.botmMoney{
			color: #207EFD;
			font-size: 30upx;
		}
		.botmMoney text{
			font-size: 40upx;
		}
		.ma-item image{
			width: 309upx;
			height: 281upx;
			margin-left: 185upx;
			margin-top: 40upx;
		}
		.fixedHeadBg{
			background-color: #FFFFFF;
		}
		.fixedHeadBg text{
			color: #000000;
		}
</style>
